<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<title>我的伙伴</title>
		<link rel="stylesheet" th:href="@{/css/jquery.mobile-1.4.5.min.css }"/>
		<script th:src="@{/js/jquery.min.js}"></script>
		<script th:src="@{/js/jquery.mobile-1.4.5.min.js}"></script>
		<link rel="stylesheet" th:href="@{/css/iconfont.css}"/>
		<style>
			.head img{
				width: 50%;
				margin-left: 25%;
				margin-top: 50px;
			}
			.line1{
			    width: 98%;
			    overflow: hidden;
			    border-bottom:1px solid #aaa ;
			    padding-left: 2%;
			    margin-top: 40px;
			}
			.line2{
			    width: 98%;
			    overflow: hidden;
			    border-bottom:1px solid #aaa ;
			    padding-left: 2%;
			    margin-top: 10px;
			}
			.line1 img{
				float: left;
				padding-top:15px;
			}
			.line1 input{
				float: left;
				width:85%;
				height: 35px;
				border: none;
				padding-left: 3%;
				line-height: 2.4rem;
				font-size: 1.2rem;
				outline: none;
				color: #4d4d4d;
				background: none;
			 }
			 .line2 img{
			 	float: left;
			 	padding-top:15px;
			 }
			 .line2 input{
			 	float: left;
			 	width:85%;
			 	height: 35px;
			 	border: none;
			 	padding-left: 3%;
			 	line-height: 2.4rem;
			 	font-size: 1.2rem;
			 	outline: none;
			 	color: #4d4d4d;
			 	background: none;
			  }
			  .ui-block-a a{
				  margin-top: 5px;
				  color: #4d4d4d;
				  margin-left: 50px;
				  padding: 0px 2%;
				  float: left;
			  }
			  .ui-block-b a{
			  	margin-top: 5px;
				color: #4d4d4d;
			  	margin-right: 50px;
			  	padding: 0px 2%;
			  	float: right;
			  }
			  .login{
				  width: 70%;
				  display:block;margin:0 auto;
				  margin-top: 20px;
			  }
		</style>
		<script type="text/javascript">
			$(document).ready(function(){
				var eid=window.sessionStorage.getItem("eid");
				//var userid=$("#userid");
				//var userpwd=$("userpwd");
				$("#login").click(function(){
					var userid = $("#userid").val();
					var userpwd = $("#userpwd").val();
					if(userid == ""||userid==null||userpwd == ""||userpwd==null){
						$("#isNull").popup('open');
					}else{
						$.post("/UserController/doLogin",$("#loginForm").serialize(), function (data) {
							var userid=data[0].userid;
							if(userid == 0){
								$("#loginError").popup('open');
								}else{
								var userhead = JSON.stringify(data[0].userhead);
								var obj={"userid":data[0].userid,"email":data[0].email,"tel":data[0].tel,"name":data[0].name}
								window.sessionStorage.setItem("userhead",userhead);
								window.sessionStorage.setItem("user",JSON.stringify(obj));
								if(eid==""||eid==null){
									window.location = "/ExperiecneCotroller/getAllExperience";
								}
								else{
									window.location = "/ViewController/toDetailed";
											}
										}
						});
				}
			});
			});
			function close1(){
				$("#isNull").popup('close');
			}
			function close2(){
				$("#loginError").popup('close');
			}
		</script>
	</head>
	<body>
		<div data-role = "page">
			<div data-role = "header">
				<h1>登录</h1>
				<a href="/ExperiecneCotroller/getAllExperience" class="ui-btn-right" data-icon = "delete" data-ajax = "false">关闭</a>
			</div>
			<div data-role = "content">
				<div class="head" >
				<img th:src="@{/image/logo.png}">
				</div>
				<form  id="loginForm">
				<div class="line1">
					<img th:src="@{/image/user.png}"/>
					<input type="text" name="userid" id="userid" placeholder="账号"/>
				</div>
				<div class="line2">
					<img th:src="@{/image/lock.png}" />
					<input type="password" name="userpwd" id="userpwd" placeholder="密码"/>
				</div>
				<fieldset class="ui-grid-a">
					<div class="ui-block-a">
						<a href="/ViewController/toRegister" data-ajax = "false" data-role = "none">注册</a>
					</div>
					
				</fieldset>
				<a href="" data-ajax = "false" data-role = "button" class="login" id="login">登录</a>
				</form>
				<div data-role = "popup" id="isNull" class="ui-content">
					<a href="#" data-role = "button" data-icon = "delete" data-iconpos = "notext" class="ui-btn-right" onclick="close1()">Close</a>
						<p>账号或密码不能为空</p>
				</div>
				<div data-role = "popup" id="loginError" class="ui-content">
					<a href="#" data-role = "button" data-icon = "delete" data-iconpos = "notext" class="ui-btn-right" onclick="close2()">Close</a>
						<p>登录失败，请核对账号密码再输入</p>
				</div>
			</div>
		</div>
	</body>
</html>
